<template>
    <div :class='$style.container'>
        <div :class='$style.left'>
            <a-menu style="height:100%" mode='inline' v-model:selectedKeys='selectedKeys' @select='setTabKey'>
                <a-menu-item :key='tabList[0].key'>{{tabList[0].tab}}</a-menu-item>
                <a-menu-item :key='tabList[1].key'>{{tabList[1].tab}}</a-menu-item>
                <a-menu-item :key='tabList[2].key'>{{tabList[2].tab}}</a-menu-item>
                <a-menu-item :key='tabList[3].key'>{{tabList[3].tab}}</a-menu-item>
                <a-menu-item :key='tabList[4].key'>{{tabList[4].tab}}</a-menu-item>
            </a-menu>
        </div>
        <div :class='$style.right'>
            <div v-show='tabKey == 1'>
                <Tab1 :params='profitSummary' />
            </div>
            <div v-show='tabKey == 2'>
                <template v-if='tabKey2Init'>
                    <Tab2 :params='transactionDetail' />
                </template>
            </div>
            <div v-show='tabKey == 3'>
                <template v-if='tabKey3Init'>
                    <Tab3 :type='props.type' :params='position' />
                </template>
            </div>
            <div v-show='tabKey == 4'>
                <template v-if='tabKey4Init'>
                    <Tab4 :params='strategyProfit' />
                </template>
            </div>
            <div v-show='tabKey == 5'>
                <template v-if='tabKey5Init'>
                    <Tab5 :params='benchmarkProfit' />
                </template>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import Tab1 from './Tab1.vue'
    import Tab2 from './Tab2.vue'
    import Tab3 from './Tab3.vue'
    import Tab4 from './Tab4.vue'
    import Tab5 from './Tab5.vue'

    const props = withDefaults(defineProps<{
        type : 'single' | 'batch'
        profitSummary : any,
        transactionDetail : any,
        position : any,
        strategyProfit : any,
        benchmarkProfit : any
    }>(), {
        type : 'batch'
    })

    const emit = defineEmits<{
        (e : 'change', key : number)
    }>()

    const selectedKeys = ref([1])

    const tabKey = ref(1)
    const tabKey2Init = ref(false)
    const tabKey3Init = ref(false)
    const tabKey4Init = ref(false)
    const tabKey5Init = ref(false)

    const tabList = reactive([
      {
        key: 1,
        tab: '收益概述',
      },
      {
        key: 2,
        tab: '交易详情',
      },
      {
        key: 3,
        tab: props.type == 'batch' ? '持仓与收益' : '每日持仓&收益',
      },
      {
        key: 4,
        tab: '策略收益',
      },
      {
        key: 5,
        tab: '基准收益',
      },
    ]);

    function setTabKey({key}) {
        tabKey.value = key
        if(key == 2 && tabKey2Init.value == false) {
            tabKey2Init.value = true
        }

        if(key == 3 && tabKey3Init.value == false) {
            tabKey3Init.value = true
        }

        if(key == 4 && tabKey4Init.value == false) {
            tabKey4Init.value = true
        }

        if(key == 5 && tabKey5Init.value == false) {
            tabKey5Init.value = true
        }

        emit('change', key)
    }

    
</script>

<style scoped lang='scss' module>
    .container{
        display: flex;
        .left{
            width: 180px;
        }

        .right{
            flex: 1;
            margin-left: 20px;
        }
    }
</style>